<template>
  <div class="list_box">
    <div class="iconfont point" ref="point">&#xe768;</div>
    <div
      class="iconfont point_double"
      ref="pointDouble"
      v-show="pointDouble"
    >
      &#xe726;&#xe727;
    </div>
    <ul>
      <li
        @click="listHandel"
        @mouseover="pointHandel"
        @mouseout="pointHandels"
        v-for="items of texts"
        :key="items.id"
        ref="li"
        :title="items.title"
      >
        {{ items.text }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { gg } from 'com/shuju'
export default {
  name: 'NoticList',
  data () {
    return {
      pointDouble: false,
      texts: [
        {id: '01', text: '公告', title: '公告'},
        {id: '02', text: '比赛', title: '比赛'},
        {id: '03', text: '简讯', title: '简讯'},
        {id: '04', text: '会议', title: '会议'}
      ]
    }
  },
  computed: {
    ...mapState({
      gg: 'gg'
    })
  },
  methods: {
    please (name) {
      var data = new FormData()
      data.set('page', 0)
      data.set('size', 9)
      data.set('bulletionTypeName', name)
      gg(data, this)
    },
    listHandel () {
      this.$emit('titleClass', event.target.innerText)
      this.please(event.target.innerText)
      this.pointDouble = false
      for (let i = 0; i < this.$refs.li.length; i++) {
        this.$refs.li[i].style.backgroundColor = 'rgb(255,255,255)'
        this.$refs.li[i].style.color = 'rgb(5,50,200)'
        if (this.$refs.li[i] === event.target) {
          event.target.style.background = 'rgb(15,153,213)'
          event.target.style.color = 'rgb(255,255,255)'
          this.$refs.point.style.top = this.$refs.li[i].offsetTop +
          this.$refs.point.offsetHeight / 3 + 'px'
        }
      }
    },
    pointHandels () {
      this.pointDouble = false
    },
    pointHandel () {
      if (!(event.target.style.color === 'rgb(255, 255, 255)')) {
        this.pointDouble = true
      }
      const point = this.$refs.pointDouble
      point.style.top = event.target.offsetTop + point.offsetHeight / 4 + 'px'
    }
  },
  mounted () {
    this.please('公告')
    var dom = this.$refs
    const point = this.$refs.point
    const pingD = this.$refs.pointDouble
    point.style.top = dom.li[0].offsetTop + point.offsetHeight / 3 + 'px'
    pingD.style.top = dom.li[0].offsetTop + pingD.offsetHeight / 4 + 'px'
    dom.li[0].style.backgroundColor = 'rgb(15,153,213)'
    dom.li[0].style.color = 'rgb(255,255,255)'
  }
}
</script>

<style lang="stylus" scoped>
  .list_box{
    user-select: none
    position: relative
    fleat: left
    width: 100px
    height: 120px
    margin-top: 50px
    margin-left: 1rem
    content: ''
    clear: both
    display: table
    .point{
      left: -43px
      font-size: .6rem
      color: rgb(15,150,200)
      font-weight: 600
      position: absolute
      transform: rotate(42deg)
      transition: top .4s
    }
    .point_double{
      line-height: 40px
      color: rgba(200,200,200,.6)
      left: -30px
      top: 5px
      width: 160px
      letter-spacing: 118px
      height: 40px
      position: absolute
      color: rgb(230,230,230)
      animation: .5s linear infinite point
    }
    @keyframes point{
      0%{
        left: -30px
      }
      25%{
        left: -33px
      }
      50%{
        left: -30px
      }
      75%{
        left: -27px
      }
      100%{
        left: -30px
      }
    }
    ul{
      position: relative
      list-style: none
      width: 100%
      padding: 0
      margin: 0
      content: ''
      clear: both
      display: table
      li{
        line-height: 50px
        width: 100%
        text-align: center
        font-size: .4rem
        color: rgb(5,50,200)
        height: 50px
        background: rgb(255,255,255)
        cursor: pointer
      }
      li + li{
        border-top: 2px solid rgb(210,210,210)
      }
    }
  }
</style>
